<template>
	<!--pages/extend/index.wxml-->
	<view class="addPeopleBox">
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">新建用药人</block>
		</cu-custom>



		<view class="user-form">
			<view>
				<text>真实姓名</text>
				<input placeholder-style="color:var(--gray)" bindblur="userName" v-model.trim="peopleData.name"
					placeholder="用药人姓名" />
			</view>
			<view>
				<text>性别</text>
				<input placeholder-style="color:var(--gray)" v-model.trim="peopleData.sex" placeholder="用药人性别" />
			</view>
			<view>
				<text>身份证号</text>
				<input maxlength="18" type="idcard" placeholder-style="color:var(--gray)" bindblur="useridCard"
					v-model.trim="peopleData.idCard" placeholder="药品使用人身份证号码" />
				<!-- <text class="round">{{peopleData.idCard}} 123123</text> -->
			</view>
			<view>
				<text>体重(kg)</text>
				<input type="digit" placeholder-style="color:var(--gray)" bindblur="userWeight"
					v-model.trim="peopleData.weight" placeholder="请输入体重,患者14岁以下必填" />
			</view>
			<view>
				<text>手机号码</text>
				<input type="number" maxlength="11" placeholder-style="color:var(--gray)" bindblur="userMobile"
					v-model.trim="peopleData.mobile" placeholder="药品使用人联系电话" />
			</view>
			<view>
				<text>健康信息</text>
				<view @tap="openDisease" class="people-history">
					<text>病史、过敏史、家族病史、肝功能、肾功能</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		<view @tap="sumbit" class="save">保存</view>
		<view bindtap='closeDisease' class="cu-modal bottom-modal " :class="diseaseShow">
			<view catchtap="true" class="cu-dialog ease-model">
				<view class="ease-title">
					<text>健康信息</text>
					<text @tap='closeDisease'>取消</text>
				</view>
				<view class="case-list-msg">
					<view>
						<view class="flex ease-list">
							<text>过往病史</text>
							<view class="flex">
								<checkbox @tap="changeGroup" data-type='caseHistory' data-name='n' class="red round"
									:checked="peopleData.case.caseHistory == 'n'"></checkbox>无
								<checkbox @tap="changeGroup" data-type='caseHistory' data-name='y' class="red round"
									:checked="peopleData.case.caseHistory == 'y'"></checkbox>有
							</view>
						</view>
						<textarea placeholder="请简述您的过往病史" v-if="peopleData.case.caseHistory == 'y'"
							bindblur="setCaseMsg" data-name='caseHistoryMsg'
							v-model.trim="peopleData.case.caseHistoryMsg" class="easeMsg"></textarea>
					</view>
					<view>
						<view class="flex ease-list">
							<text>过敏史</text>
							<view class="flex">
								<checkbox @tap="changeGroup" data-type='allergies' data-name='n' class="red round"
									:checked="peopleData.case.allergies == 'n'"></checkbox>无
								<checkbox @tap="changeGroup" data-type='allergies' data-name='y' class="red round"
									:checked="peopleData.case.allergies == 'y'"></checkbox>有
							</view>
						</view>
						<textarea placeholder="请简述您的过敏史" v-if="peopleData.case.allergies == 'y'" bindblur="setCaseMsg"
							data-name='allergiesMsg' v-model.trim="peopleData.case.allergiesMsg"
							class="easeMsg"></textarea>
					</view>
					<view>
						<view class="flex ease-list">
							<text>家族病史</text>
							<view class="flex">
								<checkbox @tap="changeGroup" data-type='familyCase' data-name='n' class="red round"
									:checked="peopleData.case.familyCase == 'n'"></checkbox>无
								<checkbox @tap="changeGroup" data-type='familyCase' data-name='y' class="red round"
									:checked="peopleData.case.familyCase == 'y'"></checkbox>有
							</view>
						</view>
						<textarea placeholder="请简述您的家族病史" v-if="peopleData.case.familyCase == 'y'" bindblur="setCaseMsg"
							data-name='familyCaseMsg' v-model.trim="peopleData.case.familyCaseMsg"
							class="easeMsg"></textarea>
					</view>
					<view>
						<view class="flex ease-list">
							<text>肝功能异常</text>
							<view class="flex">
								<checkbox @tap="changeGroup" data-type='liverAbnormal' data-name='n' class="red round"
									:checked="peopleData.case.liverAbnormal == 'n'"></checkbox>无
								<checkbox @tap="changeGroup" data-type='liverAbnormal' data-name='y' class="red round"
									:checked="peopleData.case.liverAbnormal == 'y'"></checkbox>有
							</view>
						</view>
						<textarea placeholder="肝功能描述" v-if="peopleData.case.liverAbnormal == 'y'" bindblur="setCaseMsg"
							data-name='liverAbnormalMsg' v-model.trim="peopleData.case.liverAbnormalMsg"
							class="easeMsg"></textarea>
					</view>
					<view>
						<view class="flex ease-list">
							<text>肾功能异常</text>
							<view class="flex">
								<checkbox @tap="changeGroup" data-type='kidneyAbnormal' data-name='n' class="red round"
									:checked="peopleData.case.kidneyAbnormal == 'n'"></checkbox>无
								<checkbox @tap="changeGroup" data-type='kidneyAbnormal' data-name='y' class="red round"
									:checked="peopleData.case.kidneyAbnormal == 'y'"></checkbox>有
							</view>
						</view>
						<textarea placeholder="肾功能描述" v-if="peopleData.case.kidneyAbnormal == 'y'" bindblur="setCaseMsg"
							data-name='kidneyAbnormalMsg' v-model.trim="peopleData.case.kidneyAbnormalMsg"
							class="easeMsg"></textarea>
					</view>
				</view>
				<view @tap="saveCaseMsg" class="save" style="border-radius:9999rpx;">确定</view>
			</view>
		</view>

	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'
	export default {
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				peopleData: {
					name: '',
					idCard: '',
					weight: '',
					mobile: '',
					sex: '',
					case: {
						caseHistory: 'n',
						caseHistoryMsg: '',
						allergies: 'n',
						allergiesMsg: '',
						familyCase: 'n',
						familyCaseMsg: '',
						liverAbnormal: 'n',
						liverAbnormalMsg: '',
						kidneyAbnormal: 'n',
						kidneyAbnormalMsg: '',
					}
				},
				diseaseShow: '', //是否展示
				userId: '',
			};
		},
		onLoad(options) {

		},
		mounted() {
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.userId = res.data.id
				},
			})
		},
		methods: {
			sumbit() {
				api.addPatientPeople({
					userId: this.userId,
					phone: this.peopleData.mobile,
					name: this.peopleData.name,
					idCard: this.peopleData.idCard,
					sex: this.peopleData.sex,
					weight: this.peopleData.weight,
					caseHistory: this.peopleData.case.caseHistoryMsg,
					allergies: this.peopleData.case.allergiesMsg,
					familyCase: this.peopleData.case.familyCaseMsg,
					liverAbnormal: this.peopleData.case.liverAbnormalMsg,
					kidneyAbnormal: this.peopleData.case.kidneyAbnormalMsg,
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '新增成功',
							duration: 2000,
							icon: "none",
						})
						uni.$emit('people', '1')
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			openDisease() { //开启弹窗
				this.diseaseShow = 'show'
			},
			closeDisease() { //关闭弹窗
				this.diseaseShow = ''
			},
			saveCaseMsg() { //确定按钮
				this.diseaseShow = ''
			},
			changeGroup(e) {
				if (e.target.dataset.type == 'caseHistory') {
					this.peopleData.case.caseHistory = e.target.dataset.name
				} else if (e.target.dataset.type == 'allergies') {
					this.peopleData.case.allergies = e.target.dataset.name
				} else if (e.target.dataset.type == 'familyCase') {
					this.peopleData.case.familyCase = e.target.dataset.name
				} else if (e.target.dataset.type == 'liverAbnormal') {
					this.peopleData.case.liverAbnormal = e.target.dataset.name
				} else if (e.target.dataset.type == 'kidneyAbnormal') {
					this.peopleData.case.kidneyAbnormal = e.target.dataset.name
				}

			}

		}

	}
</script>

<style scoped lang="scss">
	.addPeopleBox {
		width: 100%;
		height: 100%;
		background-color: white;
	}

	page {
		background-color: var(--white);
	}

	.user-form>view {
		display: flex;
		border-bottom: 2rpx solid var(--ghostWhite);
		padding: 20rpx;
		align-items: center;
	}

	.user-form>view>text:nth-child(1) {
		font-size: 30rpx;
		color: var(--black);
		width: 120rpx;
		text-align: center;
	}

	.user-form>view>text:nth-child(3) {
		font-size: 24rpx;
		background: var(--grey);
		color: var(--white);
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 14rpx;
		text-align: center;
		margin-left: 20rpx;
	}

	.user-form>view>input:nth-child(2) {
		font-size: 30rpx;
		color: var(--black);
		text-align: center;
		width: 450rpx;
		text-align: left;
		margin-left: 20rpx;
	}

	.people-history {
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.people-history>text:nth-child(2) {
		margin-left: 10rpx;
	}

	.save {
		width: 700rpx;
		height: 80rpx;
		background-color: #e5432e;
		color: white;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		border-radius: 10rpx;
	}

	.ease-title {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		margin-top: -20rpx;
		justify-content: space-between;
	}

	.ease-title>text:nth-child(1) {
		font-size: 32rpx;
		font-weight: bold;
		color: var(--black);
	}

	.ease-title>text:nth-child(2) {
		font-size: 30rpx;
		color: var(--gray);
	}

	.ease-model {
		padding: 30rpx;
		justify-content: space-between;
	}

	.case-list-msg {
		max-height: 70vh;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.ease-list {
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
	}

	.ease-list checkbox {
		margin: 10rpx;
	}

	.ease-list>.flex {
		align-items: center;
	}

	.easeMsg {
		width: 100%;
		height: 140rpx;
		background: var(--ghostWhite);
		color: var(--black);
		text-align: left;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 10rpx;
	}
</style>
